Vue CLIで作成したプロジェクトのユニットテストをパスするためのワークアラウンド

このエントリの内容はv2.6.10がリリースされ、現在は修正されています。

こんにちは。サービスグループの武田です。

最近Vueを触り始めました。長らく最新のフロント技術からは離れていたので、いろいろと手探りで進めています。

Vueには開発を便利に進めているツールとしてVue CLIが提供されています。今回はVue CLIで作成したプロジェクトのユニットテストがエラーで落ちてしまう件を調査しましたので共有します。

先に結論

遭遇したエラーは2019年3月19日現在、Vue 2.6.9で発生しているものです。GitHubではすでにPRもマージされていたため次のリリースで解決すると思われます。

環境

今回の検証環境は以下となります。特にsedはMac標準のBSD sedではなく、GNU sedを利用しているため注意してください。

$ sed --version | head -1
sed (GNU sed) 4.4

$ node -v
v10.15.3

$ vue -V
3.5.1

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.3
BuildVersion:	18D109

vueコマンドがインストールされていない場合は、npm install -g @vue/cliでインストールします。前述しましたが、Vueのバージョンは2.6.9です。

事象の再現

まずはVue CLIを利用してプロジェクトを作成します。

$ vue create try-unit-test

presetはManualを選択。

個別に必要なモジュールが選択できます。ここでは全部選択してしまいます（aで全選択）。

その後クラススタイルやTypeScriptなど選んでいきますが、とりあえずすべてデフォルトで進めます。1箇所注意としてユニットテストのモジュールはMocha + Chaiを選択する必要があります。Jestを選択した場合、そもそも今回のエラーは起きません。

すべて選択し終わるとインストールが開始されます。

実際にインストールされたバージョンを確認してみます。package.jsonでは^2.6.6という指定がされており、実際には2.6.9がインストールされています。

$ cd try-unit-test/

$ grep '"vue":' package.json
    "vue": "^2.6.6",

$ npm list --depth=0 | grep vue@
├── [email protected]

この状態でユニットテストを走らせてみます。

$ npm run test:unit

ReferenceError: performance is not definedというランタイムエラーが発生してテストが実行できません。

ワークアラウンド

バグ解消版がリリースされるまでのワークアラウンドとしてglobal.performanceを用意すればテストが実行できます。コマンドは次のとおりで、jsdomおよびjsdom-globalのインストール、global.performanceを設定するスクリプトの作成、ユニットテスト実行時にスクリプトのロードを行います。

$ npm install -D jsdom jsdom-global

$ cat > tests/setup.js <<EOF
require('jsdom-global')();

global.performance = window.performance;
EOF

$ sed -i -e 's/ test:unit"/ test:unit -r tests\/setup.js"/' package.json

準備ができたら再度ユニットテストを実行してみます。

$ npm run test:unit

今度は無事に実行できました。

まとめ

Vueを利用したアプリケーションの開発がなんとなくわかってきたので、次にユニットテストをやろうとしたところハマってしまいました。しかし、調べてみるとIssueが上がっておりしかも解決済みということで、Vueがスピーディに開発されていることをうかがい知ることができました。